<template>
  <!-- 背景视频区域 -->
  <video-bgc-container v-bind="videoBgcInfo">
    <template #content>
      <div class="content header_wrapper">
        <div class="time">
          <span class="day">{{ dateValue.day }}</span>
          <span class="monthAadYear">/{{ dateValue.month }}/{{ dateValue.year }}</span>
          <span class="nowTime">{{ dateValue.nowTime }}</span>
        </div>

        <!-- -->
        <div class="person" style="cursor: pointer" @click="routerJumpByUserInfo">
          <img v-if="userInfo && userInfo.avatar" :src="userInfo.avatar" />
          <img v-else src="@/assets/img/default/unknownPortrait.svg" />
          <div :class="['name', userInfo ? 'hasInfoName' : 'noHasInfoName']">
            <span class="nickName">{{ userInfo?.name ? userInfo.name : "登录 | 注册" }}</span>
            <span class="idName">
              {{ userInfo?.account ? userInfo.account : "点此进行登录或注册" }}
            </span>
          </div>
        </div>

        <!-- @click="toPersonDetail" -->
        <!-- <div class="person" style="cursor: pointer" v-else>
          <img :src="userInfo.avatar" />
          <div class="name">
            <span class="nickName">{{}}</span>
            <span class="idName">{{ userInfo.userAccount }}</span>
          </div>
        </div> -->

        <div class="title">
          <!-- 使用echarts动态标题 -->
          <main-title text="高效的自习室管理预约平台"></main-title>
          <h3>——基于Node+Vue+Echarts</h3>
        </div>
      </div>
    </template>
  </video-bgc-container>
</template>

<script setup lang="ts">
import videoBgcContainer from "@/components/video-bgc-container/video-bgc-container.vue"
import mainTitle from "@/components/page-charts/src/main-title.vue"
// import lineEchart from "@/components/page-charts/src/line-echart.vue"
import useFormatData from "@/hooks/useFormatData"
import useRouterJump from "@/hooks/useRouterJump"
import { onMounted } from "vue"
import type { IVideoBgcContainer } from "@/components/video-bgc-container/type"

const videoBgcInfo: IVideoBgcContainer = {
  videoContainerHeight: 0.8,
  videoLink: "/video/home.mp4"
}

const { userInfo, routerJumpByUserInfo } = useRouterJump()
// function jumpPage() {
//   if (!userInfo) {
//     routerJump("push", "Login-Register")
//   } else {
//     routerJump("push", "PersonalCenter")
//   }
// }

// const showGoodsCategorySale = computed(() => {
//   return { labels: ["zhanghis", "dshf", "kkk"], values: ["123", "123", "777"] }
// })

// 使用格式时间的hook函数
const { dateValue, formatDate } = useFormatData()

onMounted(() => {
  setInterval(formatDate, 800)
})
</script>

<style lang="less" scoped>
.content {
  // overflow: hidden;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 80px;
  // margin-top: 140px;
  height: 700px;
  z-index: 2;

  .time {
    will-change: transform;
    position: absolute;
    bottom: 100px;
    .day {
      font-size: 50px;
      font-weight: 800;
      color: #fff;
    }
    .monthAadYear {
      font-size: 25px;
      color: #fff;
      margin-left: 10px;
      font-weight: 300;
    }
    .nowTime {
      margin-left: 20px;
      color: #fff;
      font-size: 24px;
      letter-spacing: 1px;
    }
  }

  .person {
    will-change: transform;
    position: absolute;
    bottom: 200px;
    display: flex;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .name {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 10px;
    }
    .hasInfoName {
      .nickName {
        font-size: 17px;
        color: #fff;
      }
      .idName {
        font-size: 14px;
        color: rgb(147, 165, 189);
      }
    }
    .noHasInfoName {
      .nickName {
        font-size: 17px;
        color: #666;
      }
      .idName {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .title {
    color: #fff;
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    h1 {
      font-size: 60px;
      letter-spacing: 5px;
    }
    h3 {
      float: right;
      font-size: 22px;
      margin-top: 5px;
      font-weight: 300;
      letter-spacing: 1px;
    }
  }
}
</style>
